﻿<div>
    <h4>Varying heights and widths (default middle aligned)</h4>
    <FluentHorizontalScroll Speed="600" Easing="ScrollEasing.EaseInOut">
        <FluentCard>Card number 1</FluentCard>
        <FluentCard style="height:75px">Card number 2</FluentCard>
        <FluentCard style="width:100px;height:300px">Card number 3</FluentCard>
        <FluentCard style="width:200px;height:150px">Card number 4</FluentCard>
        <FluentCard>Card number 5</FluentCard>
        <FluentCard style="width:100px;height:240px">Card number 6</FluentCard>
        <FluentCard>Card number 7</FluentCard>
        <FluentCard style="width:140px;height:160px">Card number 8</FluentCard>
        <FluentCard>Card number 9</FluentCard>
        <FluentCard style="width:80px;height:80px">Card number 10</FluentCard>
        <FluentCard style="width:150px;height:150px">Card number 11</FluentCard>
        <FluentCard style="width:110px;height:260px">Card number 12</FluentCard>
        <FluentCard>Card number 13</FluentCard>
        <FluentCard style="width:100px;height:300px">Card number 14</FluentCard>
        <FluentCard style="width:100px;height:300px">Card number 15</FluentCard>
        <FluentCard>Card number 16</FluentCard>
    </FluentHorizontalScroll>

    <h4>Top aligned</h4>
    <FluentHorizontalScroll class="top-align" Speed="600" Easing="ScrollEasing.EaseInOut">
        <FluentCard>Card number 1</FluentCard>
        <FluentCard style="height:75px">Card number 2</FluentCard>
        <FluentCard style="width:100px;height:300px">Card number 3</FluentCard>
        <FluentCard style="width:200px;height:150px">Card number 4</FluentCard>
        <FluentCard>Card number 5</FluentCard>
        <FluentCard style="width:100px;height:240px">Card number 6</FluentCard>
        <FluentCard>Card number 7</FluentCard>
        <FluentCard style="width:140px;height:160px">Card number 8</FluentCard>
        <FluentCard>Card number 9</FluentCard>
        <FluentCard style="width:80px;height:80px">Card number 10</FluentCard>
        <FluentCard style="width:150px;height:150px">Card number 11</FluentCard>
        <FluentCard style="width:110px;height:260px">Card number 12</FluentCard>
        <FluentCard>Card number 13</FluentCard>
        <FluentCard style="width:100px;height:300px">Card number 14</FluentCard>
        <FluentCard style="width:100px;height:300px">Card number 15</FluentCard>
        <FluentCard>Card number 16</FluentCard>
    </FluentHorizontalScroll>

    <h4>Bottom aligned</h4>
    <FluentHorizontalScroll class="bottom-align" Speed="600" Easing="ScrollEasing.EaseInOut">
        <FluentCard>Card number 1</FluentCard>
        <FluentCard style="height:75px">Card number 2</FluentCard>
        <FluentCard style="width:100px;height:300px">Card number 3</FluentCard>
        <FluentCard style="width:200px;height:150px">Card number 4</FluentCard>
        <FluentCard>Card number 5</FluentCard>
        <FluentCard style="width:100px;height:240px">Card number 6</FluentCard>
        <FluentCard>Card number 7</FluentCard>
        <FluentCard style="width:140px;height:160px">Card number 8</FluentCard>
        <FluentCard>Card number 9</FluentCard>
        <FluentCard style="width:80px;height:80px">Card number 10</FluentCard>
        <FluentCard style="width:150px;height:150px">Card number 11</FluentCard>
        <FluentCard style="width:110px;height:260px">Card number 12</FluentCard>
        <FluentCard>Card number 13</FluentCard>
        <FluentCard style="width:100px;height:300px">Card number 14</FluentCard>
        <FluentCard style="width:100px;height:300px">Card number 15</FluentCard>
        <FluentCard>Card number 16</FluentCard>
    </FluentHorizontalScroll>
</div>

<h4>Mobile</h4>
<FluentHorizontalScroll View="HorizontalScrollView.Mobile" Speed="600" Easing="ScrollEasing.EaseInOut">
    <FluentCard>Card number 1</FluentCard>
    <FluentCard>Card number 2</FluentCard>
    <FluentCard>Card number 3</FluentCard>
    <FluentCard>Card number 4</FluentCard>
    <FluentCard>Card number 5</FluentCard>
    <FluentCard>Card number 6</FluentCard>
    <FluentCard>Card number 7</FluentCard>
    <FluentCard>Card number 8</FluentCard>
    <FluentCard>Card number 9</FluentCard>
    <FluentCard>Card number 10</FluentCard>
    <FluentCard>Card number 11</FluentCard>
    <FluentCard>Card number 12</FluentCard>
    <FluentCard>Card number 13</FluentCard>
    <FluentCard>Card number 14</FluentCard>
    <FluentCard>Card number 15</FluentCard>
    <FluentCard>Card number 16</FluentCard>
</FluentHorizontalScroll>